{% extends "auth.html" %}
{% block full_width_content %}
<div class="text-xl flex flex-col">
    <div class="bg-blue-200 mt-8 mb-8 border-b-8 border-blue-300">
        <div class="copy-container px-8 py-8 md:py-16 md:px-16 mb-8 flex flex-col gap-16 md:flex-row justify-between items-stretch">
            <div class="flex flex-col gap-4">
                <h1 class="font-bold font-slab text-sky-600 text-6xl tracking-wide">{{_('main_title')}}</h1>
                <h2 class="py-0 my-0 font-sans font-light text-black tracking-wide">{{_('main_subtitle')}}</h2>
                <div class="flex flex-row gap-4 min-w-full">
                    <button data-cy="start_learning_button" class="green-btn text-white w-64 py-4" onclick="window.location.href='/hedy'">{{_('start_learning')}}</button>
                    <button data-cy="start_teaching_button" class="white-btn text-blue-500 w-64 py-4" onclick="window.location.href={% if not user.is_teacher %}'for-teachers/preview-teacher-mode'{% else %}'for-teachers'{% endif %}">{{_('start_teaching')}}</button>
                </div>
            </div>
            {# image for large screens #}
            <div class="hidden md:block overflow-visible relative flex-none" style="width: 500px">
                {% if not custom_logo %}
                    <div id="logo_code_overlay" class="absolute z-10 {% if (_('print_logo')|length + _('hello_logo')|length) > 15 %}text-2xl translate-y-8{% elif (_('print_logo')|length + _('hello_logo')|length) > 11 %}text-3xl translate-y-8{% else %}text-4xl translate-y-6{% endif %} h-full flex gap-4 items-center justify-center align-middle" style="width: 600px; font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;">
                        <span style="color: #ff6188;">{{_('print_logo')}}</span>
                        <span class="text-white">{{_('hello_logo')}}</span>
                    </div>
                    <img class="absolute drop-shadow-lg" src="{{static('/images/hero-graphic/hero-graphic-empty.png')}}" style="max-width: 600px; bottom: -170px;">
                {% else %}
                   <img class="absolute drop-shadow-lg" src="{{static('/images/hero-graphic/hero-graphic-' + g.lang + '.png')}}" style="max-width: 600px; bottom: -170px;">
                {% endif %}

            </div>
            {# image for small screens #}
            <div class="md:hidden flex-none">
                <img src="images/hero-graphic/hero-graphic.png">
            </div>
        </div>
    </div>
    <div id="main_page_content" class="text-display-copy">
        {% for section in content %}
        <div class="{{loop.cycle('stripe-white', 'stripe-colored')}} py-16">
            {% if section['style'] == 'block' %}
                <div class="copy-container px-10 md:px-16">
                    <h2 class="font-bold">{{ section['title'] }}</h2>
                    <div class="heading-underline"></div>
                    <p>{{ section['text']|commonmark }}</p>
                </div>
            {% elif section['style'] == 'pane-with-image-left' %}
                <div class="copy-container-wide px-4 md:px-16 flex flex-col items-center md:flex-row justify-between gap-6">
                    <img src="{{static(section['image'])}}" class="w-4/5 md:w-2/5">
                    <div class="column-pane px-8 py-4 md:w-3/5">
                        <h3>{{ section['title'] }}</h3>
                        <p>{{ section['text']|commonmark }}</p>
                    </div>
                </div>
            {% elif section['style'] == 'pane-with-image-right' %}
                <div class="copy-container-wide px-4 md:px-16 flex flex-col items-center md:flex-row justify-between gap-6">
                    <div class="column-pane shadow-md rounded-lg px-8 py-4 md:w-3/5">
                        <h3>{{ section['title'] }}</h3>
                        <p>{{ section['text']|commonmark }}</p>
                    </div>
                    <img src="{{static(section['image'])}}" class="w-4/5 md:w-2/5">
                </div>
            {% elif section['style'] == 'columns' %}
                <div class="copy-container columns px-4 md:px-16 flex flex-col md:flex-row justify-between gap-6">
                    {% for col in section['columns'] %}
                    <div class="column-pane shadow-md rounded-lg px-8 py-4 flex-1">
                        <h3>{{ col['title'] }}</h3>
                        <p>{{ col['text']|commonmark }}</p>
                    </div>
                    {% endfor %}
                </div>
            {% endif %}
        </div>
        {% endfor %}
    </div>
    <div class="stripe-white text-base text-blue-600 py-16">
        <div class="flex flex-col sm:flex-row max-w-screen-md mx-auto px-10 text-links-plain">
            <div class="flex-1">
                <a href="/subscribe" data-cy="subscribe_button">{{_('subscribe_newsletter')}}</a><br>
                <a href="/learn-more" data-cy="learnmore_button">{{_('nav_learn_more')}}</a><br>
                <a href="/for-teachers/manual" data-cy="footer_manual_button">{{_('teacher_manual')}}</a><br>
                <a href="/privacy" data-cy="privacy_button">{{_('privacy_terms')}}</a><br>
            </div>
            <div class="flex-1">
                <a href="https://github.com/hedyorg/hedy" data-cy="github_button">{{_('hedy_on_github')}}</a><br>
                <a href="https://www.facebook.com/profile.php?id=61578101102215" data-cy="facebook_button">{{_('facebook_page')}}</a><br>
                <a href="https://www.linkedin.com/company/hedyorg" data-cy="linkedin_button">{{_('linkedin_page')}}</a><br>
                <a href="https://github.com/sponsors/hedyorg" data-cy="sponsor_button">{{_('become_a_sponsor')}}</a><br>
                <a href="https://discord.gg/8yY7dEme9r" data-cy="discord_button">{{_('discord_server')}}</a><br>
                <a href="https://github.com/hedyorg/hedy/wiki/Hedy-Translation-Tutorial" data-cy="translate_button">{{_('translating_hedy')}}</a><br>
                ✉️ <a href="mailto:hello@hedy.org" data-cy="email_button">hello@hedy.org</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}
